<template>
	<view class="share-wrap">
		<canvas id="shareCanvas" canvas-id="shareCanvas" @error="canvasIdErrorCallback"></canvas>
		<view class="share-canvas" @click="makeImg">
			<image class="page-bg__img" src="../../static/change/share.png" mode=""></image>
			<view class="share-con">
				<view class="share-name">{{userInfo.nickName}}</view>
				<view class="share-qrcode page-bg__code">
					<tki-qrcode ref="qrcode" :val="val" :size="size" unit="upx" background="#ffffff" :icon="icon" :loadMake='loadMake'
					 @result="qrR" />
				</view>
				<view class="share-invitation">邀请码： {{userInfo.userPhone}}</view>
			</view>
		</view>
		
		<view class="share-img" v-if="imgPath" @click.stop="closeImgPath(1)">
			<image class="share-img__img" :src="imgPath" mode="" @click.stop="closeImgPath(2)"></image>
			<view class="share-img__btn" @click.stop="closeImgPath(2)">
				<view class="btn" @click="saveImg">保存图片</view>
				<view class="btn" @click="shareImg">分享好友</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	import shareBg from '../../static/change/share.png'
	import common from '../../utils/common.js'
	export default {
		data() {
			return {
				userInfo: {},
				shareImgSrc: '',
				isShow: false,
				serverHost: '',
				val: 'https://ext.dcloud.net.cn/plugin?id=39',
				size: 300,
				icon: '',
				iconSize: 50,
				loadMake: true,
				imgPath: '',
				shareBg: '',
				qrCode: '', // 生成的二维码图片
				common,
				destWidth: 0,
				destHeight: 0
			}
		},

		methods: {
			// 绘制画布
			canvasDrwa() {
				console.log('开始会话');
				let ctx = uni.createCanvasContext('shareCanvas', this)
				// 获取可是区域宽高
				let view = uni.createSelectorQuery().in(this).select('.share-canvas');
				let destWidth = 0
				let destHeight = 0
				let that = this
				
				view.fields({
					 size: true,
					  scrollOffset: true
				}, data => {
					 console.log('得到节点信息' + JSON.stringify(data));
					  console.log('节点的宽为' + data.width);
					destWidth = data.width
					destHeight = data.height
					let centerX = destWidth / 2
					let centerY = destHeight / 2
					this.destWidth = destWidth
					this.destHeight = destHeight
					console.log(centerX)
					let that = this
					ctx.drawImage(that.shareBg, 0, 0, destWidth, destHeight)
					ctx.setFillStyle('#FFFFFF')
					ctx.setFontSize(16)
					ctx.setTextAlign('center')
					ctx.fillText('用户名： 189874', centerX, destHeight - 290)
					
					// 二维码背景
					ctx.rect(centerX - 85, destHeight - 270, 170, 170)
					ctx.fill()
					ctx.drawImage(that.qrCode, centerX - 75, destHeight - 260, 150, 150)
					
					ctx.setFontSize(14)
					ctx.setTextAlign('center')
					ctx.fillText('邀请码： 189874', centerX, destHeight - 80)
					ctx.draw()
					
					console.log('会话完成')
				}).exec();
			},
			// 二维码生成的base64图片
			qrR(res) {
				// console.log(res)
				console.log('二维码生成完成');
				this.qrCode = res
				this.canvasDrwa()
			},
			
			// 预览海报
			preview() {
				console.log('开始预览');
				let view = uni.createSelectorQuery().in(this).select('.share-canvas');
				let destWidth = 0
				let destHeight = 0
				
				view.fields({
					size: true,
					scrollOffset: true
				}, data => {
					console.log('得到节点信息' + JSON.stringify(data));
					console.log('节点的宽为' + data.width);
					destWidth = data.width
					destHeight = data.height
					let centerX = destWidth / 2
					let centerY = destHeight / 2
				
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: destWidth,
						height: destHeight,
						destWidth: destWidth,
						destHeight: destHeight,
						canvasId: 'shareCanvas',
						success: function(res) {
							// 在H5平台下，tempFilePath 为 base64
							console.log(res)
							console.log(res.tempFilePath)
							uni.previewImage({
								current:0,
								urls:[ res.tempFilePath, res.tempFilePath ]
							})
						}
					})
			}).exec();
			},
			
			// 生成海报
			makeImg() {
				console.log('开始生成');
				let that = this
				uni.showLoading({
					title:'海报生成中...'
				})
				console.log(this.destWidth)
				console.log(this.destHeight)
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: this.destWidth,
					height: this.destHeight,
					destWidth: this.destWidth,
					destHeight: this.destHeight,
					canvasId: 'shareCanvas',
					success: function(res) {
						// 在H5平台下，tempFilePath 为 base64
						uni.hideLoading()
						console.log(res)
						console.log(res.tempFilePath)
						that.imgPath = res.tempFilePath
						return
						/* uni.previewImage({
							current:0,
							urls:[ res.tempFilePath, res.tempFilePath ]
						}) */
					}
				})
			},
			// 画布绘制出错
			canvasIdErrorCallback(err) {
				console.error(err)
			},
			// 点击阴影处关闭海报
			closeImgPath(id) {
				console.log(id)
				if(id === 1) {
					this.imgPath = ''
				}
			},
			saveImg() {
				let that = this
				uni.saveImageToPhotosAlbum({
					filePath: this.imgPath,
					success: function() {
						console.log('save success');
					}
				});
			},
			shareImg() {
				uni.share({
				    provider: 'weixin',
				    scene: 'WXSceneSession',
				    type: 0,
				    href: 'http://uniapp.dcloud.io/',
				    title: 'uni-app分享',
				    summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
				    imageUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png',
				    success: function (res) {
				        console.log('success:' + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log('fail:' + JSON.stringify(err));
				    }
				});
			}
		},
		components: {
			'tki-qrcode': tkiQrcode
		}
	}
</script>

<style scoped lang="less">
	@import '../../app.less';

	.share-img{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.4);
		.flex-base;
		justify-content: center;
		flex-direction: column;
		padding: 15% 10%;
		box-sizing: border-box;
		.share-img__btn{
			.flex-base;
			justify-content: center;
		}
		.btn{
			margin-left: 20rpx;
		}
		.share-img__img{
			width: 90%;
			    height: 90%;
			    margin-bottom: 20rpx;
		}
	}
	.share-wrap {
		width: 100vw;
		height: 100vh;
	}

	#shareCanvas {
		width: 100%;
		height: 100%;
		 // display: none;
		 position: absolute;
		 left: 0;
		 top: 0;
	}

	.share-canvas {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		width: 100%;
		height: 100%;
	}

	.page-bg__img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.share-con {
		color: @f;
		position: relative;
		margin-bottom: 15%;
		text-align: center;

		.share-name {
			.f30;
		}

		.share-qrcode {
			margin: 30rpx 0;
			background-color: @f;
			padding: 10rpx;
			overflow: hidden;
		}

		.share-invitation {
			.f24;
		}
	}

	.page-bg__code {
		width: 300rpx;
		height: 300rpx;
	}

</style>
